<template>
  <div
    class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg"
    @click="openDrawer"
  >
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col gap-y-1">
      <common-title-module />
      <CommonDisplayModule
        title="输入"
        :valueList="data?.inoutlist"
      />
      <CommonDisplayModule
        title="输出"
        :valueList="data?.outputjsonlist"
      />
      <div class="flex items-center">
        <div class="node-sub-text">数据表</div>
        <div class="ml-2 node-text">{{ selectSQL.name || '未配置数据表' }}</div>
      </div>
    </div>
    <Handle type="source" :position="Position.Right" />
  </div>
  <DatabaseDrawerModule
    ref="drawerRef"
    :title="node?.node?.label"
    :form="data"
    :selectSQL="selectSQL"
    @add="handleClickAddBtn"
    @remove="handleClickDeleteBtn"
    @cancel="onCancel"
  />
</template>
<script setup>
import { ref } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { editNode } from '@/api/modules/flow';
import { listTableField } from '@/api/modules/flow';

import CommonTitleModule from '../modules/common-title-module.vue';
import CommonDisplayModule from '../modules/common-display-module.vue';
import DatabaseDrawerModule from '../modules/database-drawer-module.vue';
defineProps();
const node = useNode();

const selectSQL = ref({
  name: '',
  sqlList: []
})
const data = ref({
  reason: '',
  customizesql: node.node.data?.customizesql || '',
  databeseid: node.node.data?.databeseid || '',
  excepjsondata: node.node.data?.excepjsondata || {
    timeout: 60,
    retrycount: '不重试',
    excepmethod: '中断流程',
  },
  inoutlist: node.node.data?.inoutlist || [
    {
      varname: 'input',
      varparam: '',
      vartype: 'String',
    },
  ],
  outputjsonlist: node.node.data?.outputjsonlist || [
    {
      varname: 'outputList',
      vartype: 'Array<Object>',
      vardesc: '',
      outputlist: [],
    },
    {
      varname: 'rowNum',
      vartype: 'Integer',
      vardesc: '',
    }
  ],
});


const drawerRef = ref(null);
const openDrawer = () => {
  drawerRef.value?.init();
};

const getTableField = async() => {
  if (!node.node.data?.databeseid) return;
  try {
    const { data } = await listTableField({data: {dbtableid: node.node.data?.databeseid}})
    selectSQL.value.name = data[0].tablename;
    selectSQL.value.sqlList = data;
  }catch(err) {
    selectSQL.value.name = '';
    selectSQL.value.sqlList = [];
  }
}
getTableField()

function handleClickAddBtn(listKey) {
  if (listKey == 'outputjsonlist') {
    data.value.outputjsonlist[0].outputlist.push({
      varname: '',
      vartype: 'String',
      vardesc: '',
    })
  } else {
    data.value[listKey].push({
      varname: '',
      vartype: 'String',
      varparam: '',
    });
  }
 
  node.node.data = {
    ...node.node.data,
  };
}

function handleClickDeleteBtn(listKey, index) {
  if (listKey == 'outputjsonlist') {
    data.value.outputjsonlist[0].outputlist.splice(index, 1);
  } else {
    data.value[listKey].splice(index, 1);
  }
  node.node.data = {
    ...node.node.data,
  };
}

const onCancel = async() => {
  await editNode({data: { id: node.id, ...data.value}})
}
</script>
